<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
	<title>Im_html</title>

	<link rel="stylesheet/less" type="text/css" href="./static/style/im_style.less?v=0.0.3" />
	<link rel="stylesheet" type="text/css" href="./static/libs/emoji/iconfont.css">
	<script src="./static/js/less/3.5.3/less.js"></script>
	
</head>
<body>
  
<div class="im-page" id="IM-PAGE" >
	<!-- IM-MAIN start -->
	<div class="im-main" v-bind:class="{show:show_im_main,sm_main:show_main_sm}">

		<!-- im-main-chat-left-list start -->
		<div class="im-main-chat-left-list" v-if="im_json_length>1">
			<div class="list-cont">

				<div class="rows" v-for="(item,k) in im_json" v-bind:class="{active:k==im_main['key']}" @click="clickImJsonItem" :data-key="k">
					<div class="avatar">
						<img :src="item.avatar" />
					</div>
					<div class="info">
						<div class="info-top"><span>{{item.name}}</span></div>
						<div class="info-bottom">
							<span class="def-text">{{item.signature}}</span>
						</div>
					</div>
					<img class="close-btn" src="./static/icon/left-close.png" title="移除" @click.stop="clickRemoveIm":data-key="k">
				</div>

			</div>
		</div>
		<!-- im-main-chat-left-list end -->

		<!-- im-main-chat-content start -->
		<div class="im-main-chat-content" v-bind:class="{full:im_json_length<=1}">

			<!-- chat-main-top start -->
			<header class="chat-main-top" @click="clickMasterTop">
				<div class="top-cont">
					<div class="avatar">
						<img :src="im_main.avatar" />
					</div>
					<div class="info">
						<div class="info-top"><span>{{im_main.name}}</span></div>
						<div class="info-bottom">
							<span class="def-text">{{im_main.signature}}</span>
						</div>
					</div>
					<div class="top-cont-ab">
						<img class="btn" src="./static/icon/main-none.png" title="缩小" @click.stop="showSmMain"/>
						<!-- <img class="btn" id="bigContent" src="./static/icon/main-big.png" title="全屏/取消全屏" /> -->
						<img class="btn show-inline" src="./static/icon/main-close.png" title="关闭窗口" @click.stop="closeMain" />
					</div>
				</div>
			</header>
			<!-- chat-main-top end -->


			<!-- chat-main-content start -->
			<div class="chat-main-content" id="chatMainContent">

				<div class="content-msg-list" >

					<div class="msg-row" v-for="(log_item,log_index) in im_main_logs" v-bind:class="{right:(log_item.from==login_info['key'])}">
						<div class="avatar">
							<img :src="(log_item.from==login_info['key'])?log_item.from_obj.avatar:log_item.to_obj.avatar" />
						</div>
						<div class="row-info">
							<div class="contet">
								<spa v-html="log_item.content"></span>
								<icon class="arrow">
							</div>
						</div>
					</div>

				</div>

			</div>
			<!-- chat-main-content end -->

			<!-- chat-main-bottom start -->
			<div class="chat-main-bottom">
					<!-- emoji 工具包 -->
					<div class="utils-emoji" v-if="utils_main_bottom.emoji.status">
						<div  class="emoji-icon" v-for="(eml_item,eml_index) in emoji_list" v-html="eml_item.d" @click="chooseUtilsEmoji" :data-index="eml_index"></div>
					</div>
					<!-- emoji 工具包 -->
					<div class="btn-list">
						<div class="btn" @click="opShowMainUtilsEmoji" v-bind:class="{active:utils_main_bottom.emoji.status}">
							<img class="btn" src="./static/icon/emoji.png">
						</div>
						<div class="btn">
							<img class="btn" src="./static/icon/video.png">
							<form class="" id="uploadVide">
								<input type="file" name="video" accept=".mp4,.rm,.rmvb" @change="uploadVide" />
							</form>
						</div>
						<div class="btn">
							<img class="btn" src="./static/icon/img.png">
							<form class="" id="uploadImg">
								<input type="file" name="video" accept=".jpg,.jpeg,.png,.gif" @change="uploadImg" />
							</form>
						</div>
						<div class="right-btn show" @click="sendText">
							发送
						</div>
					</div>
					<div class="input-dom">
						<!-- contenteditable spellcheck="false"  -->
						<textarea id="imInputText"  class="textarea"  @input="editImInputText" v-model="im_input_text" @keyup.enter.ctrl="sendText" placeholder="Ctrl + Enter 发送消息"></textarea>
					</div>
			</div>
			<!-- chat-main-bottom end -->
		</div>
		<!-- im-main-chat-content end -->

	</div>
	<!-- IM-MAIN end -->

	<!-- IM-MASTER start -->
	<div class="im-master">
		<img class="master-btn" src="./static/icon/logo.png" v-bind:class="{show:!show_im_master}" @click="opShowMaster">
		<div class="master-content" v-bind:class="{show:show_im_master}">
			<!-- master-content-top start -->
			<header class="master-content-top">
				<div class="top-cont">
					<div class="avatar">
						<img :src="login_info.avatar" />
					</div>
					<div class="info">
						<div class="info-top"><span>{{login_info.name}}</span></div>
						<div class="info-bottom">
							<span class="def-text">{{login_info.signature}}</span>
						</div>
					</div>
					<div class="top-cont-ab">
						<img class="btn" src="./static/icon/main-none.png" title="缩小" @click="opShowMaster"/>
					</div>
				</div>
			</header>
			<!-- master-content-top end -->

			<!-- master-content-navs start -->
			<div class="master-content-navs">
				<div class="row " v-for="(nav_item,nav_index) in master_content_navs" :title="nav_item['name']" :data-type="nav_item['type']" v-bind:class="{active:(now_mc_nav_type==nav_item['type'])}" @click="changeMasterNav">
					<img :src="nav_item['icon']">
				</div>
			</div>
			<!-- master-content-navs end -->

			<!-- master-content-list start -->
			<div class="master-content-list" v-if="now_mc_nav_type==1">
				<div class="list-item" v-for="(mgl_item,mgl_index) in member_group_list" v-bind:class="{active:mgl_item['active']}">
					<div class="item-title" @click="opShowMemberGroup" :data-index="mgl_index">
						<img class="more-icon" src="./static/icon/left.png">
						<div class="cont"><span class="value">{{mgl_item.group.name}}</span><span class="tips">({{mgl_item['member_list'].length}})</span></div>
					</div>
					<div class="item-rows">
						<div class="row" v-for="(m_item,m_index) in mgl_item['member_list']" @click="clickMemberGroupItem" :data-gindex="mgl_index" :data-index="m_index">
							<div class="top-cont">
								<div class="avatar">
									<img :src="m_item.avatar" />
								</div>
								<div class="info">
									<div class="info-top"><span>{{m_item.name}}</span></div>
									<div class="info-bottom">
										<span class="def-text">{{m_item.signature}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- master-content-list end -->

			<!-- master-content-list start -->
			<div class="master-content-list" v-else-if="now_mc_nav_type==2">
				<div class="list-item active" >
					<div class="item-rows">
						<div class="row" v-for="(tgl_item,tgl_index) in team_group_list" @click="clickTeamGroupItem" :data-index="tgl_index">
							<div class="top-cont">
								<div class="avatar square">
									<img :src="tgl_item.avatar" />
								</div>
								<div class="info">
									<div class="info-top"><span>{{tgl_item.name}}</span></div>
									<div class="info-bottom">
										<span class="def-text">{{tgl_item.signature}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- master-content-list end -->

			<!-- master-content-list start -->
			<div class="master-content-list" v-else-if="now_mc_nav_type==3">
				<div class="list-item active" >
					<div class="item-rows">
						<div class="row" v-for="(mll_item,mll_index) in master_logs_list" @click="clickTeamGroupItem" :data-index="mll_index">
							<div class="top-cont">
								<div class="avatar square">
									<img :src="mll_item.avatar" />
								</div>
								<div class="info">
									<div class="info-top"><span>{{mll_item.name}}</span></div>
									<div class="info-bottom">
										<span class="def-text">{{mll_item.signature}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- master-content-list end -->

			

		</div>
	</div>
	<!-- IM-MASTER end -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="./static/libs/emoji/iconfont.js"></script>
<script type="text/javascript" src="./static/js/im-pro/main.js?v=0.0.1"></script>
<script type="text/javascript" src="./static/js/im-pro/view.js" ></script>
</html>